<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane label="积分支入" name="support">
        <IntegralSupportBill v-if="activeTab === 'support'" :id="id" />
      </el-tab-pane>
      <el-tab-pane label="积分支出" name="expenditure">
        <IntegralExpenditureBill v-if="activeTab === 'expenditure'" :id="id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import IntegralSupportBill from '../components/integralSupportBill.vue'
import IntegralExpenditureBill from '../components/integralExpenditureBill.vue'
export default {
  name: 'SettleBillDetail',
  components: {
    // 数据表格
    IntegralSupportBill,
    // 审核弹窗
    IntegralExpenditureBill
  },
  props: {},
  data() {
    return {
      activeTab: 'support',
      id: ''
    }
  },

  created() {
    const { id } = this.$route.query
    if (id) this.id = id
  },
  methods: {
    handleClick({ name }) {
      this.activeTab = name
    },

    exportFile() {
      this.$refs.billTable.exportFile()
    },
    update() {
      this.getSettlementBillDetail()
      this.$refs.billTable.getBySettlementId()
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.el-tabs__header {
  padding: 10px;
  background-color: #ffffff;
}
</style>
